<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{width:100%;height:100%;}
			.ball1 { display: inline-block; width: 500px; height: 500px;
				 margin: 0; border-radius: 50%; position: relative; 
				 background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); } 
			.ball1:before { content: ""; position: absolute; top: 1%;
				 left: 5%; width: 90%; height: 90%; border-radius: 50%;
				  background: radial-gradient(circle at 50% 0px, #ffffff, 
				  rgba(255, 255, 255, 0) 58%); filter: blur(5px); z-index: 2; }
			
			.ball2 { display: inline-block; width: 500px; height: 500px; margin: 0; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%); }
			.ball2:before { content: ""; position: absolute; background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; bottom: 2.5%; left: 5%; opacity: 0.6; height: 100%; width: 90%; filter: blur(5px); z-index: 2; } .ball2:after { content: ""; width: 100%; height: 100%; position: absolute; top: 5%; left: 10%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg); filter: blur(10px); }
			
			.ball{width: 500px; height: 500px;
				 margin: 0; border-radius: 50%;}
				 

		</style>
	</head>
	<body>
		<img class="ball" src="img/tu.jpg"></img>
		<img class="ball2" src="img/tu.jpg"></img>
	</body>
</html>
